<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @click="goBack()"></view>
				<view class="header-title">售后</view>
			</view>
		</view> 
		
		<view class="sellOrder">
			<view class="sellOrder-wrapper">
				<view class="sellOrder-list">
					<view class="sellOrder-list__item">
						<view class="sellOrder-box">
							<view class="sellOrder-top">
								<view class="no">订单编号：{{ details.orderId }}</view>
							</view>
							<view class="sellOrder-content noBorder" v-for="(item,index) in details.cartInfoList" :key="index">
								<view class="imgBox">
									<image :src="item.cartInfoMap.productInfo.image" mode=""></image>
								</view>
								<view class="content">
									<view class="name">{{ item.cartInfoMap.productInfo.storeName }}</view>
									<view class="tips">{{ item.cartInfoMap.productInfo.attrInfo.sku }}</view>
									<view class="num">数量：{{ item.cartInfoMap.cartNum }}</view>
									<view class="price">￥{{ item.cartInfoMap.truePrice }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg">
			<view class="buyWaysList">
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item" @tap.stop="openPopup('textBoxPopup')">
						<view class="left">
							<view class="title">售后类型</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<!-- <view class="tt tt--grey">{{ getStatusTxt(returnType) }}</view> -->
								<view class="tt tt--grey">{{ returnTypeText == '' ? '请选择' : returnTypeText }}</view>
								<image src="@/static/shop/next.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="returnType == 3">
						<view class="left">
							<view class="title">换货商品</view>
						</view>
						<view class="right" @tap.stop="$tools.jump('./exchangeGoodsList',details.cartInfoList[0].cartInfoMap.productId)">
							<view class="nextBox">
								<view class="tt" v-if="attrList.length > 0">{{ attrList[0].productInfo.storeName }}</view>
								<view class="tt tt--grey" v-else>请选择换货商品</view>
								<image src="@/static/shop/next.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="sellOrder" v-if="attrList.length > 0">
					<view class="sellOrder-list">
						<view class="sellOrder-list__item">
							<view class="sellOrder-box">
								<view class="sellOrder-huanTitle">换货商品</view>
								<view class="sellOrder-content" v-for="(item,index) in attrList" :key="index">
									<view class="imgBox">
										<image :src="item.productInfo.image" mode=""></image>
									</view>
									<view class="content">
										<view class="name">{{ item.productInfo.storeName }}</view>
										<view class="tips">{{ item.productInfo.attrInfo.sku }}</view>
										<view class="num">数量：{{ item.cartNum }}</view>
										<view class="price">￥{{ item.truePrice }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">货物状态</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">{{ getStatus(Number(details.status)) }}</view>
								<!-- <image src="@/static/shop/next.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<!-- <view class="buyWaysList-list__item" @tap.stop="openPopup('textBoxPopup')">
						<view class="left">
							<view class="title">售后原因</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">{{ text == '' ? '请选择' : text }}</view>
								<image src="@/static/shop/next.png" mode=""></image>
							</view>
						</view>
					</view> -->
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">收货方式</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt">{{ details.shippingType == 1 ? '物流' : '自提' }}</view>
							</view>
						</view>
					</view>
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">数量</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">{{ details.totalNum }}</view>
								<!-- <image src="@/static/shop/next.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="details.shippingType == 1">
						<view class="left">
							<view class="title">邮费</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">￥{{ details.totalPostage }}</view>
								<!-- <image src="@/static/shop/next.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">金额</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">￥{{ details.totalPrice }}</view>
								<!-- <image src="@/static/shop/next.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<!-- 发货了才需要上传凭证 -->
					<template v-if="returnType != 1 && details.status == 2">
					<view class="buyWaysList-list__item buyWaysList-list__item--03">
						<view class="left">
							<view class="title">图片凭证</view>
						</view>
					</view>
					<view class="buyWaysList-list__item buyWaysList-list__item--04">
						<view class="left">
							<u-upload :fileList="fileList1"
									@afterRead="afterRead"
									@delete="deletePic"
									name="1"
									:multiple="true"
									:maxCount="9"
									:previewFullImage="true">
							<image src="@/static/public/addImg.png" mode="widthFix" style="width: 172rpx;height: 172rpx;"></image>
							</u-upload>
						</view>
					</view>
					</template>
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">原因说明</view>
						</view>
					</view>
					<view class="textareaItem">
						<textarea name="" id="" cols="30" rows="10" v-model="describe"
						placeholder="太久未发货了，退款买其他的" placeholder-class="inputStyle"></textarea>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 按钮 -->
		<view class="orderDetails-btnBox">
			<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">提交</view>
		</view>
		
		<!-- 弹框 -->
		<uni-popup ref="textBoxPopup" type="bottom" :animation="true" @change="changePopup($event,'textBoxPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="application">
						<view class="application-wrapper">
							<view class="headerBox">
								<view class="title">请选择申请原因</view>
								<view class="imageBox" @tap.stop="hidePopup('textBoxPopup')">
									<view class="titleClose">取消</view>
								</view>
							</view>
							<view class="application-list">
								<scroll-view scroll-y="true" class="application-height">
									<view class="application-list__item" v-for="(item,index) in applicationList" :key="index"
									@tap.stop="checkAppActive(index,item)">
										<view class="name" :class="{'name--active' : appActive == index}">{{ item.name }}</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import url from '@/common/js/url.js';
	export default {
		components:{
		},
		data(){
			return{
				num: '',
				text: '',
				appActive: -1,
				applicationList:[
					// {name: '不想要了'},{name: '不喜欢，效果不好'},{name: '材质，面料与商品描述不符'},
					// {name: '大小尺寸与商品描述不符'},{name: '颜色，款式，图案与秒速不符'},{name: '质量问题'},
					// {name: '收到商品少件（含少配件）'},{name: '商品破损或污渍'},{name: '其他原因'},
					{name: '退款'},{name: '退货退款'},{name: '换货'},
				],
				fileList1: [],
				describeImages: [],
				id: '',
				status: '',
				details: {},
				currentTime: '',
				returnType: '',
				describe: '',
				returnTypeText: '',
				attrId: '',
				attrList: [],
			}
		},
		computed:{
			getStatus(){
				// 1=待发货,2=待收货,3=已完成 4售后 全部 =orderStatus 为空
				return function(type){
					switch (type){
						case 1:
							return '待发货';
							break;
						case 2:
							return '待收货';
							break;
						case 3:
							return '已完成';
							break;
						case 4:
							return '售后';
							break;
					}
				}
			},
			getStatusTxt(){
				// 1退款(无需退货)  2退货退款   3换货
				return function(type){
					switch (type){
						case 1:
							return '退款';
							break;
						case 2:
							return '退货退款';
							break;
						case 3:
							return '换货';
							break;
					}
				}
			},
		},
		onLoad(options) {
			this.id = options.value1;
			if(options.value2){
				this.returnType = options.value2;
				this.returnTypeText = this.applicationList[this.returnType-1].name;
			}
		},
		onShow() {
			this.init();
			if(uni.getStorageSync('attrId')){
				this.attrId = uni.getStorageSync('attrId');
				this.attrList = uni.getStorageSync('attrList');
			}
		},
		methods: {
			init(){
				this.getOrderDetail();
			},
			goBack(){
				this.$tools.back(1);
				uni.removeStorageSync('attrId');
				uni.removeStorageSync('attrList');
			},
			confirm(){
				if (this.returnTypeText == '' ) {
					return this.$tools.toast('请选择售后类型');
				}
				if (this.describe == '' ) {
					return this.$tools.toast('请输入原因');
				}
				// if(this.returnType != 1){
				// 	if (this.fileList1.length == 0 ||  this.describeImages.length == 0) {
				// 		return this.$tools.toast('请上传图片凭证');
				// 	}
				// }
				var data = {};
				data['orderId'] = this.id;
				data['returnType'] = this.returnType;
				data['describe'] = this.describe;
				if(this.returnType == 3){
					data['describeImages'] = this.describeImages.toString();
					data['attrId'] = this.attrId;
				}
				console.log("data:",data);
				this.$Ajax('/api/refund/cancelOrder',data,res => {
						if (res.code == 200) {
							this.$tools.toastBack("售后提交成功",1);
							this.describe = '';
							uni.removeStorageSync('attrId');
							uni.removeStorageSync('attrList');
						} 
					},err => {
					}
				)
			},
			// 订单详情
			getOrderDetail() {
				var data = {
					id: this.id,  
				};
				console.log("data：",data);
				uni.showLoading({
					mask: true
				})
				this.$Ajax('/api/order/orderDetail/'+ this.id,data,res => {
						this.details = res.data.data;
						this.currentTime = res.currentTime;
						console.log(this.details)
						if(this.details.status == 1 || this.details.shippingType == 2){
							this.returnTypeText = '退款';
							this.returnType = 1;
							this.appActive = 0;
							this.applicationList = [
								{name: '退款'}
							]
						}else{
							this.applicationList = [
								{name: '退款'},{name: '退货退款'},{name: '换货'},
							]
						}
						uni.hideLoading();
					}, err => {
						uni.hideLoading();
					}
				)
			},
			checkAppActive(index,item){
				if(this.appActive != index){
					this.appActive = index;
					this.returnType = index+1;
					this.returnTypeText = item.name;
					this.hidePopup('textBoxPopup');
				}
			},
			// 删除图片 (封面图)
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.describeImages.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				console.log(event);
				uni.showLoading({
				    title: "上传中",
				    mask: true
				});
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				lists.forEach((item,index) => {
					let now_time = new Date().getTime();
					uni.uploadFile({
						url: url.webUrl+'/api/common/upload', 
						filePath: item.url,
						name: 'file',
						formData: {
							// 'key': now_time,
						},
						success: (uploadFileRes) => {
							let uploadImgUrl = JSON.parse(uploadFileRes.data).data;
							console.log("uploadImgUrl:",uploadImgUrl);
							if(event.name == '1'){
								that.describeImages.push(uploadImgUrl.url); 
								that.fileList1.push({'url': uploadImgUrl.url});
							}
						},
						fail: (error) => {
							console.log(error);
							that.$tools.toast("上传失败");
						},
						complete: () => {
							setTimeout(function() {
								uni.hideLoading();
							}, 250);
						}
					})
				})
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBoxBg{
		margin: 0rpx 32rpx 200rpx;
		padding: 0;
	}
	.buyWaysList{
		&-list{
			&__item{
				padding: 40rpx 0;
				margin: 0 30rpx;
				border-bottom: 1px solid rgba(153,153,153,0.15);
				width: calc(100% - 60rpx);
				&:nth-last-child(1){
					// border-bottom: none;
				}
				&:nth-last-child(2){
					border-bottom: none;
					padding: 40rpx 0 20rpx;
				}
				&--03{
					border-bottom: none;
					padding: 40rpx 0 0rpx;
				}
				&--04{
					border-bottom: none;
					padding: 20rpx 0 20rpx;
				}
				.right{
					width: 85%;
					@include initMoreLine(1);
					.nextBox{
						@include flexRight;
						.tt{
							font-family: PingFangSC-Regular, PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #131414;
							margin-right: 20rpx;
							width: calc(85% - 20rpx - 32rpx);
							@include initMoreLine(1);
							text-align: right;
							&--grey{
								color: #999999;
							}
						}
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}
	
	.textareaItem{
		padding: 0 30rpx 30rpx;
		textarea{
			height: 140rpx;
			font-size: 28rpx;
		}
	}
	
</style>